<template>
    <Layout class="layout-container mask-all">
        <Spin fix v-if="loading" size="large"></Spin>
        <Content>
            <Layout class="layout-container padding-all">
                <div class="padding-bottom">
                    <Row>
                        <Col span="16">
                        <ButtonGroup>
                            <Button icon="ios-add-circle-outline" @click="onAddClicked" v-if="perms.add" :title="button.text.add" />
                            <Button icon="ios-create-outline" :disabled="button.disabled" @click="onEditClicked" v-if="perms.edit" :title="button.text.edit" />
                            <Button icon="ios-remove-circle-outline" :disabled="button.disabled" @click="onRemoveClicked" v-if="perms.remove" :title="button.text.remove" />
                            <Button icon="ios-options" :disabled="button.disabled" v-if="perms.perm" @click="onAllocClicked" :title="button.text.perm" />
                        </ButtonGroup>
                        </Col>
                        <Col span="8">
                        <Input search :enter-button="search.button" :placeholder="search.placeholder" @on-search="onSearch" />
                        </Col>
                    </Row>
                </div>
                <Content ref="container" class="layout-page-container">
                    <Table ref="selection" border :height="paging.height" :loading="paging.loading" :columns="paging.columns" :data="paging.data" @on-selection-change="onSelectionChange"></Table>
                </Content>
                <div class="padding-top">
                    <Page :current="paging.page" :total="paging.total" :page-size="paging.pageSize" show-total show-elevator show-sizer transfer @on-page-size-change="onPageSizeChange" @on-change="onPageChange" />
                </div>
            </Layout>
        </Content>
    </Layout>
</template>
<script type="text/javascript">
import { Layout, Content, Page, Alert, Row, Col, Icon, Input, Button, ButtonGroup, Table, Spin } from 'view-design';
import { dateRender, perms, fit, confirm, createWindow, each, extend } from 'config/utils';

//分页列表
const URI_DATAGRID = "/security/api/role/datagrid";
//删除接口
const URI_REMOVE = "/security/api/role/remove";
//添加
const ROUTER_ADD = "sys/role/add";
//修改
const ROUTER_EDIT = "sys/role/edit";
//分配权限
const ROUTER_PERM = "sys/role/perm";

export default {
    name: "SysRoleManage",
    data() {
        return {
            loading: true,
            search: {
                placeholder: this.$t("info.search.placeholder"),
                button: this.$t("info.search.text"),
                value: ""
            },
            perms: {
                add: false,
                edit: false,
                remove: false,
                perm: false
            },
            button: {
                disabled: true,
                text: {
                    add: this.$t("info.add"),
                    edit: this.$t("info.edit"),
                    remove: this.$t("info.remove"),
                    perm: this.$t("sys.role.title.perms")
                }
            },
            paging: {
                height: 500,
                data: [],
                columns: [{
                    type: 'selection',
                    width: 60,
                    align: 'center',
                    fixed: 'left'
                }, {
                    key: 'id',
                    title: this.$t("sys.role.id"),
                    width: 200
                }, {
                    type: "html",
                    key: 'name',
                    title: this.$t("sys.role.name"),
                    width: 200
                }, {
                    type: "html",
                    key: 'memo',
                    title: this.$t("sys.memo"),
                    minWidth: 300
                }, {
                    key: 'createtime',
                    title: this.$t("sys.createtime"),
                    width: 170,
                    align: 'center',
                    formatter: dateRender
                }, {
                    key: 'updatetime',
                    title: this.$t("sys.updatetime"),
                    width: 170,
                    align: 'center',
                    formatter: dateRender
                }],
                selections: [],
                loading: false,
                page: 1,
                pageSize: 10,
                total: 0
            }
        };
    },
    methods: {

        loadDataGrid: function() {
            if (!this.paging.loading) {
                this.paging.loading = true;
                this.onSelectionChange([]);
                this.$http.post(URI_DATAGRID, {
                    pageNumber: this.paging.page,
                    pageSize: this.paging.pageSize,
                    search: this.search.value
                }).then((response) => {
                    var res = response.data;
                    if (res.success) {
                        var data = res.data;
                        this.paging.total = data.total;
                        this.paging.data = data.rows;
                    }
                    this.paging.loading = false;
                });
            }
        },
        onSearch: function(value) {
            this.search.value = value;
            this.paging.page = 1;
            this.loadDataGrid();
        },
        onSelectionChange: function(rows) {
            this.paging.selections = rows;
            this.button.disabled = rows.length == 0;
        },
        onPageChange: function(page) {
            this.paging.page = page;
            this.loadDataGrid();
        },
        onPageSizeChange(size) {
            this.paging.page = 1;
            this.paging.pageSize = size;
            this.loadDataGrid();
        },
        onAddClicked: function() {
            var me = this;
            createWindow({
                title: this.$t("sys.role.title.add"),
                router: ROUTER_ADD,
                callback: () => {
                    this.loadDataGrid();
                }
            });
        },
        onEditClicked: function() {
            var me = this;
            var rows = this.paging.selections;
            createWindow({
                title: this.$t("sys.role.title.edit"),
                router: ROUTER_EDIT,
                params: rows[0],
                callback: (result) => {
                    each(this.paging.data, function() {
                        if (this.id == result.id) {
                            extend(this, result);
                            me.onSelectionChange([]);
                            return false;
                        }
                    });
                }
            });
        },
        onRemoveClicked: function() {
            var me = this;
            confirm("info.confirm.remove", function(isOk) {
                if (isOk) {
                    var rows = me.paging.selections;
                    var ids = [];
                    each(rows, function() {
                        ids.push(this.id);
                    });
                    me.$http.post(URI_REMOVE, { ids: ids }).then((response) => {
                        var res = response.data;
                        if (res.success) {
                            me.loadDataGrid();
                        }
                        this.remove();
                    });
                    return false;
                }
            }, true);
        },
        onAllocClicked: function() {
            var rows = this.paging.selections;
            createWindow({
                title: this.$t("sys.role.title.perms"),
                router: ROUTER_PERM,
                params: rows[0]
            });
        }
    },
    mounted() {
        var params = {
            add: "sys:role:manager:add",
            edit: "sys:role:manager:edit",
            remove: "sys:role:manager:remove",
            perm: "sys:role:manager:perm"
        };
        //获取权限
        perms(params, (isOk, data) => {
            if (isOk) {
                this.perms = data;
            }
            this.loadDataGrid();
            this.loading = false;
        });
        this.$nextTick(() => {
            //列表自适应高度
            fit(this.$refs.container, this.paging);
        });
    },
    components: {
        Layout,
        Content,
        Alert,
        Page,
        Row,
        Col,
        Input,
        Button,
        ButtonGroup,
        Table,
        Spin,
        Icon
    }
}
</script>